<template>
  <view class="page">
    <u-navbar autoBack fixed placeholder bgColor="#ffffff">
      <template #left>
        <view class="navBar">
          <u-icon name="arrow-left" color="#000" size="18"></u-icon>
          <view class="nav_title">
            <u-avatar :src="strategyDetail.createUserInfo.avatar" size="30"></u-avatar>
            <text>{{strategyDetail.createUserInfo.nickName}}</text>
          </view>
        </view>
      </template>
    </u-navbar>
    <view class="content" :style="{ height: `calc(100% - ${navBarHeight}px)` }" >
      <view class="strategy-img">
        <image :src="strategyDetail.img" mode="aspectFill"></image>
      </view>
      <view class="detail">
        <view class="title">{{strategyDetail.title}}</view>
        <view class="desc">{{strategyDetail.content}}</view>
        <view class="publish">发布于 {{this.getPublishDay()}} {{this.getPublishTime()}} {{strategyDetail.address}}</view>
        <view class="user-info">
          <view class="avatar">
            <u-avatar :src="strategyDetail.createUserInfo.avatar" size="30"></u-avatar>
            <text>{{strategyDetail.createUserInfo.nickName}}</text>
          </view>
          <view class="concern" @click="attention">{{ isAttention ? '取消关注' : '关注' }}</view>
        </view>
        <view class="comments">
          <view class="comment-box" v-for="(comment, index) in commentList" :key="index">
						<u-avatar :src="comment.createUserInfo.avatar" size="30"></u-avatar>
						<view class="right">
						  <view class="name">{{comment.createUserInfo.nickName}}</view>
						  <view class="content-text">{{comment.content}}</view>
						</view>
					</view>
        </view>
        <view class="footer">
          <view class="compose-box" @click="show = true">
            <uni-icons type="compose" color="#999999" size="20"></uni-icons>
            <text class="right">说点...</text>
          </view>
          <view class="heart" @click="strategyLike">
            <u-icon v-if="checkLike" name="heart-fill" size="30" color="#0E9489"></u-icon>
            <u-icon v-else name="heart" size="30" color="#333333"></u-icon>
            <text>{{strategyLikeNum}}</text>
          </view>
          <view class="star" @click="strategyCollect">
            <uni-icons v-if="checkCollect" type="star-filled" size="30" color="#0E9489"></uni-icons>
            <uni-icons v-else type="star" size="30" color="#333333"></uni-icons>
            <text>{{strategyCollectNum}}</text>
          </view>
          <view class="chat" @click="toCommentList">
            <uni-icons type="chat" size="30" color="#333333"></uni-icons>
            <text>{{Number(strategyDetail.strategyCommentNum)}}</text>
          </view>
        </view>
        <u-popup :show="show" :round="10" @open="comment = ''" @close="show = false">
          <view class="comment-box">
            <u--textarea v-model="comment" :maxlength="-1" placeholder="输入评论内容" ></u--textarea>
            <view style="margin-top: 10px;">
              <u-button type="primary" text="评 论" color="#0E9489" shape="circle" @click="addComment"></u-button>
            </view>
          </view>
        </u-popup>
      </view>
    </view>
  </view>
</template>

<script>

import {
  commentAdd,
  customerAttention,
  customerAttentionCancel,
  getStrategyDetail,
  getCommentList,
  strategyLikeCance, strategyLike, strategyCollectCancel, strategyCollect
} from "@/api/introduction";
import moment from "moment";

export default {
  onLoad(options) {
    this.getStrategyDetail(options.strategyId)
    this.createTime = options.createTime
  },
  data() {
    return {
      strategyDetail: '',
      createTime: '',
      show: false,
      comment: '',
      isAttention: false,
			checkCollect: false,
			strategyCollectNum: 0,
			checkLike: false,
			strategyLikeNum: 0,
			commentList: []
    };
  },
  computed: {
    navBarHeight() {
      const platform = uni.getSystemInfoSync().platform
      const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
      let navHeight = 0
      if (['ios', 'devtools'].includes(platform)) {
        navHeight = 44
      } else {
        navHeight = 48
      }
      return navHeight + statusBarHeight
    },
  },
  methods: {
    async getStrategyDetail(strategyId) {
      const { code, data, msg } = await getStrategyDetail(strategyId)
      if (code !== 200) {
        this.$modal.msgError(msg)
        return
      }
      this.strategyDetail = data
      this.isAttention = data.createUserInfo.isAttention
			this.checkCollect = data.checkCollect
			this.checkLike = data.checkLike
			this.strategyCollectNum = Number(data.strategyCollectNum)
			this.strategyLikeNum = Number(data.strategyLikeNum)
			this.strategyCommentNum = Number(data.strategyCommentNum)
			await this.getCommentList(strategyId)
    },
		async getCommentList(strategyId) {
		  const { code, data, msg } = await getCommentList({
		    aimId: strategyId
		  })
		  if (code !== 200) {
		    this.$modal.msgError(msg)
		    return
		  }
		  this.commentList = data.rows
		},
    getPublishDay() {
      // 今天
      const today = moment(this.createTime).isSame(moment(), "day")
      if (today) {
        return '今天 '
      }
      // 昨天
      const yesterday = moment(this.createTime).isSame(moment().subtract(1, 'day'), "day")
      if (yesterday) {
        return '昨天'
      }
      return moment(this.createTime).format('mm月dd日')
    },
    getPublishTime() {
      return moment(this.createTime).format('HH:mm')
    },
    async addComment() {
      const { code, msg } = await commentAdd({
        aimId: this.strategyDetail.id,
        content: this.comment
      })
      if (code !== 200) {
        this.$modal.msgError(msg)
        return
      }
      this.show = false
      await this.getCommentList(this.strategyDetail.id)
    },
    async attention() {
      let res
      if (this.isAttention) {
        res = await customerAttentionCancel({
          aimId: this.strategyDetail.createById
        })
      } else {
        res = await customerAttention({
          aimId: this.strategyDetail.createById
        })
      }
      const { code, msg } = res
      if (code !== 200) {
        this.$modal.msgError(msg)
        return
      }
      this.isAttention = !this.isAttention
    },
    toCommentList() {
      uni.navigateTo({
        url: `/pages/Introduction/pages/comment?strategyId=${this.strategyDetail.id}`
      })
    },
		// 攻略点赞
		async strategyLike() {
		  let res
		  if (this.checkLike) {
		    // 取消点赞
		    res = await strategyLikeCance({
		      aimId: this.strategyDetail.id
		    })
		  } else {
		    // 新增点赞
		    res = await strategyLike({
		      aimId: this.strategyDetail.id
		    })
		  }
		  const { code, msg } = res
		  if (code !== 200) {
		    this.$modal.msgError(msg)
		    return
		  }
		  if (this.checkLike) {
		    this.strategyLikeNum--
		  } else {
		    this.strategyLikeNum++
		  }
			this.checkLike = !this.checkLike
		},
		// 攻略收藏
		async strategyCollect() {
			let res
			if (this.checkCollect) {
				// 取消收藏
				res = await strategyCollectCancel({
					aimId: this.strategyDetail.id
				})
			} else {
				// 新增收藏
				res = await strategyCollect({
					aimId: this.strategyDetail.id
				})
			}
			const { code, msg } = res
			if (code !== 200) {
				this.$modal.msgError(msg)
				return
			}
			if (this.checkCollect) {
				this.strategyCollectNum--
			} else {
				this.strategyCollectNum++
			}
			this.checkCollect = !this.checkCollect
		}
  }
}
</script>

<style lang="scss">
.page {
  width: 100vw;
  height: 100vh;
  .navBar {
    display: flex;
    align-items: center;
    .nav_title {
      font-weight: 400;
      color: #000000;
      margin-left: 8rpx;
      display: flex;
      align-items: center;
      text {
        margin-left: 10rpx;
      }
    }
  }
  .content {
    background-color: #ffffff;
    padding-bottom: 50px;
    .strategy-img {
      width: 100%;
      height: 600rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .detail {
      padding: 10px 20rpx 90rpx;
      background: #fff;
      .title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 18px;
        color: #333333;
        line-height: 24px;
        text-align: left;
        font-style: normal;
      }
      .desc {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        line-height: 28px;
        text-align: left;
        font-style: normal;
      }
      .publish {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #999999;
        line-height: 28px;
        text-align: left;
        font-style: normal;
      }
      .user-info {
        height: 56px;
        border-radius: 8px;
        border: 1px solid #01756B;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
        margin: 10px 0 0;
        .avatar {
          display: flex;
          align-items: center;
          text {
            margin-left: 10px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 16px;
            color: #000000;
            line-height: 20px;
            text-align: left;
            font-style: normal;
          }
        }
        .concern {
          height: 32px;
          padding: 0 20px;
          background: #01756B;
          border-radius: 84px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 16px;
          color: #FFFFFF;
        }
      }
      .comments {
        padding: 20px 0;
        .comment-box {
          display: flex;
          align-items: start;
          border-top: 1px solid #F3F3F3;
          .right {
            display: flex;
            flex-direction: column;
            justify-content: start;
            margin-left: 10px;
            width: 100%;
            .name {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 14px;
              color: #999999;
              line-height: 20px;
              text-align: left;
              font-style: normal;
            }
            .content-text {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 14px;
              color: #333333;
              line-height: 24px;
              text-align: left;
              font-style: normal;
              margin-top: 6px;
            }
          }
        }
        
      }
      .footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 64px;
        background: #FFFFFF;
        border-top: 1px solid #F3F3F3;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 16px;
        .compose-box {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 38px;
          width: 103px;
          background: #F6F6F6;
          border-radius: 58px;
          .right {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #999999;
            line-height: 20px;
            text-align: left;
            font-style: normal;
          }
        }
        .heart, .star, .chat {
          display: flex;
          align-items: center;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 14px;
          color: #333333;
          font-style: normal;
        }
      }
      .comment-box {
        padding: 10px;
      }
    }
  }
}
</style>
